    <template>
    <div>
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
            <div class="itemData" v-for="(data,index) in dataList" :key="index" @click="detialRoute(data)">
                <div class="dataImg">
                    <img :src="data.image_url_set.dx_image.url['640']" alt="">
                </div>
                <div class="dataInfo">
                    <h4><span>[预热]</span>{{data.name}}</h4>
                    <div class="price">
                        <p><span>￥</span>{{data.jumei_price}}</p>
                        <span class="market-pic">￥{{data.market_price}}</span>
                    </div>
                </div>
            </div>
        </van-list>
    </div>
</template>
<script>
export default {
    data () {
        return {
            dataList: [],
            page: 1,
            finished: false,
            loading: false,
            list: [],
            type: 'pre'
        }
    },
    methods: {
        getTimeData () {
            console.log('getlist=======',this.page)
            this.axios({
                url: `/api3/ajaxDealactList?card_id=4057&client_v=1&page=${this.page}&platform=wap&type=${this.type}&page_key=`,
                method: 'get',
            }).then(res => {
                console.log(res.data);
                // this.dataList = res.data.item_list
                    if ( res.data.has_more !== '1') {
                        this.dataList.push(...res.data.item_list) // 把数组添加进去
                        this.finished = false
                        this.loading = false
                        if(this.page===8){
                            this.finished = true // 停止触发
                            this.loading = true // 加载完成
                        }
                    }else {
                        console.log('异步请求数据有误')
                    }
            })
        },
        onLoad () {
            console.log('更新');
            this.page++
            this.getTimeData()
            // this.finished = true // 停止触发
            // this.loading = true // 加载完成
            if(this.page===9){
                this.finished = true // 停止触发
                this.loading = true // 加载完成
            }
        },
        detialRoute (item) { // 跳转详情页
            this.$router.push({path: '/product/detial', query:{item_id:item.item_id, type: item.type, tid: ''}})
        },
    },
    mounted () {
        this.getTimeData()
    }
}
</script>
<style lang="scss" scoped>
.itemData{
        width: 100%;
        height: 130px;
        overflow: hidden;
        position: relative;
        margin-bottom: 10px;
        padding: 0 15px;
        box-sizing: border-box;
        background-color: #fff;
        z-index: 1;
    .dataImg{
      width: 100%;
      float: left;
      img{
        width: 100%
      }
    }
    .dataInfo{
      position: absolute;
      top: 15px;
      right: 10px;
      width: 58%;
      font-size: 14px;
      z-index: 1;
      // float: right;
      margin-top: 10px;
      h4{
          span{
              color: #fe4070;
            margin-right: 4px;
          }
      }
      .price{
        margin-top: 20px;
        p{
          font-size: 20px;
          margin: 0 2px;
          color: #fe4070;
          display: inline-block;
          span{
            font-size: 12px;
          }
        }
        .market-pic{
          color: #999;
          font-size: 12px;
          text-decoration: line-through;
          font-weight: 400;
          margin-left: 5px;
        }
      }
    }
  }
</style>
